import { css } from "@emotion/react"

const Variables = css`
    /* default value */
    /* 背景顏色 */
    --default-button-background-color-left: rgba(255, 53, 104, 1);
    --default-button-background-color-right: rgba(255, 51, 204, 1);
    --default-outline-button-background-color-left: rgb(255, 255, 255);
    --default-outline-button-background-color-right: rgb(255, 255, 255);
    /* 邊框顏色 */
    --default-button-border-color-left: rgba(255, 53, 104, 1);
    --default-button-border-color-right: rgba(255, 51, 204, 1);
    /* 邊框寬度 */
    --default-button-border-width: 2rem;
    /* 邊框圓角 */
    --default-button-border-radius: 6rem;
    /* initial value */
    /* solid */
    &[data-variant-type="solid"] {
        --button-background-color-left: var(
            --input-button-background-color-left,
            var(--default-button-background-color-left)
        );
        --button-background-color-right: var(
            --input-button-background-color-right,
            var(--default-button-background-color-right)
        );
    }
    /* outline */
    &[data-variant-type="outline"] {
        --button-background-color-left: var(
            --input-button-background-color-left,
            var(--default-outline-button-background-color-left)
        );
        --button-background-color-right: var(
            --input-button-background-color-right,
            var(--default-outline-button-background-color-right)
        );
        --button-border-color-left: var(
            --input-button-border-color-left,
            var(--default-button-border-color-left)
        );
        --button-border-color-right: var(
            --input-button-border-color-right,
            var(--default-button-border-color-right)
        );
    }

    --button-border-width: var(--input-button-border-width, var(--default-button-border-width));
    --button-border-radius: var(--input-button-border-radius, var(--default-button-border-radius));
`

const Normalize = css`
    will-change: transform, box-shadow;
    font-family: Gilroy, sans-serif;
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    font-size: 16rem;
    color: #fff;
    border-radius: 10rem;
    height: 40rem;
    cursor: pointer;
    padding: 0 20rem;
    border-radius: var(--button-border-radius);
    user-select: none;
    overflow: hidden;
    /* MUI style 的 shadow */
    transition:
        box-shadow 0.3s ease-in-out,
        transform 0.3s ease-in-out;
    /* box-shadow:
        1rem 1rem 1rem rgba(0, 0, 0, 0.4),
        1rem 1rem 1rem rgba(0, 0, 0, 0.24); */

    &:hover {
        /* transform: translate(-0.5rem, -0.5rem);
        box-shadow:
            2rem 2rem 2rem rgba(0, 0, 0, 0.4),
            2rem 2rem 2rem rgba(0, 0, 0, 0.24); */
    }

    &::after,
    &::before {
        pointer-events: none;
    }
`

const Solid = css`
    font-weight: 700;
    background: linear-gradient(
        to right,
        var(--button-background-color-left),
        var(--button-background-color-right)
    );
`

const Outline = css`
    font-weight: 400;
    /* outer */
    &::after {
        display: inline-flex;
        z-index: -2;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(
            to right,
            var(--button-border-color-left),
            var(--button-border-color-right)
        );
        border-radius: var(--button-border-radius);
    }
    /* inner */
    &::before {
        display: inline-flex;
        z-index: -1;
        content: "";
        position: absolute;
        top: var(--button-border-width);
        right: var(--button-border-width);
        bottom: var(--button-border-width);
        left: var(--button-border-width);
        border-radius: calc(var(--button-border-radius) - var(--button-border-width));
        background: linear-gradient(
            to right,
            var(--button-background-color-left),
            var(--button-background-color-right)
        );
    }

    background: linear-gradient(
        to right,
        var(--button-border-color-left),
        var(--button-border-color-right)
    );
    /* outline 風格的 文字要做漸層 */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
`

const Status = css`
    &[data-status="disabled"] {
        opacity: 0.9;
        cursor: not-allowed;
    }
    &[data-status="loading"] {
        cursor: progress;
    }
`

const Css = {
    // 變量
    Variables,
    // 規範
    Solid,
    Outline,
    Normalize,
    Status,
}

export default Css
